<template>
     <div class="bigbox">
    <div class="box" v-for="(v , i) in arr" :key="i">
      <div class="box-l">
        <span :class="v.cl"></span>
      </div>
      <div class="box-r">
        <p>{{v.name}}</p>
        <span>{{v.con}}</span>
      </div>
    </div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            arr:[
                { name: "保障资金安全", con: "贝壳宝贝", cl: "iconfont icon-wenjian" },
                {name: "精英保障计划",con: "房贷更安全",cl: "iconfont icon-ziyuanmingpian"}, 
            ]
        }
    },
}
</script>
<style scoped>
.bigbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.box {
  display: flex;
  width: 163px;
  height: 75px;
  background: #f9fbfe;
  margin-bottom: 15px;
}
.box-l span {
  font-size: 28px;
  line-height: 75px;
  margin-left: 15px;
  color: #ff7733;
}
.box-r p {
  margin-top: 18px;
  font-size: 12px;
  font-weight: 600;
  margin-left: 20px;
}
.box-r span {
  font-size: 10px;
  color: #ccc;
  margin-left: 20px;
}
</style>